<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      :width="props.width"
      :height="props.height"
      preserveAspectRatio="none meet"
      viewBox="0 0 374.658 240.807"
    >
      <g id="文字边框2" transform="translate(-1005.868 -103.052)">
        <g id="组_5020" data-name="组 5020">
          <path
            id="路径_1161"
            data-name="路径 1161"
            d="M1123.215,117.233H1008.2V341.176h115.014"
            fill="none"
            :stroke="states.color"
            stroke-miterlimit="10"
            stroke-width="1.166"
          />
          <path
            id="路径_1162"
            data-name="路径 1162"
            d="M1263.18,341.176h115.014V117.233H1263.18"
            fill="none"
            :stroke="states.color"
            stroke-miterlimit="10"
            stroke-width="1.166"
          />
        </g>
        <line
          id="直线_4"
          data-name="直线 4"
          y2="134.64"
          transform="translate(1008.201 162.113)"
          fill="none"
          :stroke="states.color"
          stroke-miterlimit="10"
          stroke-width="4.665"
        />
        <line
          id="直线_5"
          data-name="直线 5"
          y2="134.64"
          transform="translate(1378.194 162.113)"
          fill="none"
          :stroke="states.color"
          stroke-miterlimit="10"
          stroke-width="4.665"
        />
        <path
          id="直线_6"
          data-name="直线 6"
          d="M185.425,26.287H0L10-1.166H175.425Z"
          transform="translate(1100.485 104.672)"
          :fill="states.color"
        />
        <line
          id="直线_7"
          data-name="直线 7"
          x2="90.825"
          transform="translate(1147.785 341.176)"
          fill="none"
          :stroke="states.color"
          stroke-miterlimit="10"
          stroke-width="2.333"
        />
        <line
          id="直线_14"
          data-name="直线 14"
          x2="68.041"
          transform="translate(1029.771 130.959)"
          fill="none"
          :stroke="states.color"
          stroke-miterlimit="10"
          stroke-width="2.333"
        />
        <line
          id="直线_15"
          data-name="直线 15"
          x2="68.041"
          transform="translate(1288.582 130.959)"
          fill="none"
          :stroke="states.color"
          stroke-miterlimit="10"
          stroke-width="2.333"
        />
        <line
          id="直线_12"
          data-name="直线 12"
          y1="9.48"
          x2="4"
          transform="translate(1102.701 103.506)"
          fill="none"
          :stroke="states.color"
          stroke-miterlimit="10"
          stroke-width="2.333"
        />
        <line
          id="直线_13"
          data-name="直线 13"
          x1="4"
          y1="9.48"
          transform="translate(1279.91 103.506)"
          fill="none"
          :stroke="states.color"
          stroke-miterlimit="10"
          stroke-width="2.333"
        />
        <path
          id="直线_10"
          data-name="直线 10"
          d="M23.327,3.842H0V-1.65H23.327Z"
          transform="translate(1100.484 340.017)"
          :fill="states.color"
        />
        <path
          id="直线_10-2"
          data-name="直线 10"
          d="M23.327,3.842H0V-1.65H23.327Z"
          transform="translate(1074.484 116.136)"
          :fill="states.color"
        />
        <path
          id="直线_10-3"
          data-name="直线 10"
          d="M23.327,3.842H0V-1.65H23.327Z"
          transform="translate(1262.582 340.017)"
          :fill="states.color"
        />
        <path
          id="直线_10-4"
          data-name="直线 10"
          d="M23.327,3.842H0V-1.65H23.327Z"
          transform="translate(1288.582 116.136)"
          :fill="states.color"
        />
      </g>
      <text
        x="50%"
        y="8%"
        font-family="font"
        :font-size="states.fontSize"
        :fill="states.fontColor"
        style="text-anchor: middle"
      >
        {{ states.text }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});

const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
</script>

<style scoped lang="scss"></style>
